/* common.css文件，包含一些经常复用的样式 */
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}

/* 单行打点 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行打点 */
[class^="ellipsis-"],
[class*="ellipsis-"] {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
.ellipsis-2 {
  -webkit-line-clamp: 2;
}
.ellipsis-3 {
  -webkit-line-clamp: 3;
}
.ellipsis-4 {
  -webkit-line-clamp: 4;
}

/* 图片容器中关键字标记 */
.img-con .mark-con {
  position: absolute;
  bottom: 6px;
  left: 8px;
}
.img-con .mark-con .mark {
  display: inline-block;
  background: rgba(28, 31, 33, 0.6);
  border-radius: 4px;
  padding: 4px 8px;
  color: #fff;
  font-size: 12px;
}

/* 图片容器中的"新课"及"热门"标记 */
.img-con .new,
.img-con .hot {
  position: absolute;
  border: 2px solid #ffffff;
  border-radius: 12px;
  top: 8px;
  left: -8px;
  z-index: 4;
  font-family: "dincondm";
  font-size: 12px;
  color: #ffffff;
  line-height: 20px;
  padding: 0 8px;
}
.img-con .new {
  background-color: #ffaa00;
  background-image: linear-gradient(90deg, #ffaa00 17%, #f76b1c 100%);
}
.img-con .new::before {
  content: "新课";
}
.img-con .hot::before {
  content: "热门";
}
.img-con .hot {
  background-color: #f02930;
  background-image: linear-gradient(90deg, #f68688 0%, #f02930 100%);
}
